<template>
	<el-form :model="pwdForm" :rules="rules" ref="pwdForm" label-width="100px" class="change-pwdForm">
	  <el-form-item label="登录密码" prop="oldSecret">
		<el-input type="password" v-model="pwdForm.oldSecret"></el-input>
	  </el-form-item>
	  <el-form-item label="新设密码" prop="newSecret">
		<el-input type="password" v-model="pwdForm.newSecret"></el-input>
	  </el-form-item>
	  <el-form-item label="再次输入" prop="reSecret">
		<el-input type="password" v-model="pwdForm.reSecret"></el-input>
	  </el-form-item>
	  <el-form-item>
		<el-button type="primary" @click="submitForm('pwdForm')">立即修改</el-button>
		<el-button @click="resetForm('pwdForm')">重置</el-button>
	  </el-form-item>
	</el-form>
</template>

<script>
  export default {
    name: 'ChangePwd',
    data() {
		let validatePass = (rule, value, callback) => {
			if (value !== this.pwdForm.newSecret) {
				callback(new Error('diff'));
			} else {
				callback();
			}
		};
		return {
			pwdForm: {
				oldSecret: '',
				newSecret: '',
				reSecret: '',
			},
			rules: {
				oldSecret: [
					{ required: true, message: '请输入登录密码' },
					{ pattern: /^(?=.*\d)(?=.*[a-zA-Z]).{8,20}$/, message: '密码长度为8～20位，必须包含字母和数字的组合' }
				],
				newSecret: [
					{ required: true, message: '请输入新设密码' },
					{ pattern: /^(?=.*\d)(?=.*[a-zA-Z]).{8,20}$/, message: '密码长度为8～20位，必须包含字母和数字的组合' }
				],
				reSecret: [
					{ required: true, message: '请输入再次输入新设密码' },
					{ validator: validatePass, message: '两次输入密码不一致' }
				]
			}
		};
	},
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (!valid) {
          	return;
          }
          let params = this.pwdForm;
          this.$http.fetch(this.api.modifyMineSecret, params)
          	.then(data => {
          		this.$message({ message: '修改密码成功！', type: 'success' });
          	});
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style>
	.change-pwdForm {
		margin-top: 3rem;
		max-width: 25rem;
	}
</style>
